<template>
  <!-- 弹框新增/编辑收货地址 -->
  <div class="pop-up">
    <div class="add-container">
      <div class="txt">
        <div>{{ popTitle }}</div>
        <span class="el-icon-close" @click="closePopUp" />
      </div>

      <div class="add-content">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="收货地址" prop="addressTitle">
            <el-input
              v-model="ruleForm.addressTitle"
              prefix-icon="el-icon-add-location"
              placeholder="点击选择收货地址"
              @click.native="chooseAddress"
              @focus="hideErrMsg('addressTitle')"
            />
          </el-form-item>
          <el-form-item label="详细地址" prop="receiveAddress">
            <el-input
              v-model="ruleForm.receiveAddress"
              type="textarea"
              maxlength="50"
              placeholder="街道，楼牌号等"
              @focus="hideErrMsg('receiveAddress')"
            />
            <span class="num" v-text="ruleForm.receiveAddress.length + '/50'">0/50</span>
          </el-form-item>
          <el-form-item label="收货人姓名" prop="receiverName">
            <el-input
              v-model="ruleForm.receiverName"
              @focus="hideErrMsg('receiverName')"
            />
          </el-form-item>
          <el-form-item label="手机号码" prop="receiverPhone">
            <el-input v-model="ruleForm.receiverPhone" @focus="hideErrMsg('receiverPhone')" />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              class="save"
              @click="save"
            >保存</el-button>
            <el-button
              class="cancel"
              @click="closePopUp('ruleForm')"
            >取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 选择地址弹窗 -->
    <ChooseMap v-if="showMap" :location="{lat: ruleForm.latitude, lng: ruleForm.longitude}" @concel="concel" @submitMap="submitMap" />
  </div>
</template>

<script>
import ChooseMap from '@/components/ChooseMap'
import { addAddress, modifyAddress } from '@/api/address'
export default {
  components: {
    ChooseMap
  },
  props: {
    type: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      ruleForm: {
        id: '',
        addressTitle: '',
        receiveAddress: '',
        receiveProvince: '',
        receiveCity: '',
        receiveDistrict: '',
        latitude: '',
        longitude: '',
        receiverName: '',
        receiverPhone: ''
      },
      showMap: false,
      rules: {
        addressTitle: [
          { required: true, message: '请选择收货地址', trigger: 'change' }
        ],
        receiveAddress: [
          { required: true, message: '请输入详细地址', trigger: 'blur' },
          {
            pattern: /^[\S\n\s]{1,50}$/,
            message: '地址不能大于50字',
            trigger: 'blur'
          }
        ],
        receiverName: [
          { required: true, message: '请输入收货人姓名', trigger: 'blur' },
          {
            pattern: /\S/,
            message: '收货人姓名格式不正确',
            trigger: 'blur'
          }
        ],
        receiverPhone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: '手机号码格式不正确',
            trigger: 'blur'
          }
        ]
      },
      popTitle: this.type === 0 ? '新增收货地址' : '编辑收货地址'
    }
  },
  methods: {
    closePopUp() {
      document.body.style.overflow = 'auto'
      Object.assign(this.$data.ruleForm, this.$options.data().ruleForm)
      this.$emit('closePopUp')
    },
    // 重置
    resetForm() {
      this.$refs['ruleForm'].resetFields()
    },
    // 移除错误提示
    hideErrMsg(progName) {
      this.$refs['ruleForm'].clearValidate(progName)
    },
    chooseAddress() {
      this.showMap = true
      document.body.style.overflow = 'hidden'
    },
    // 保存地址
    save() {
      this.$refs.ruleForm.validate(isValid => {
        if (isValid) {
          //   如果为真则发起请求
          if (!this.ruleForm.id) {
            // 新增地址
            const type = 'address-add'
            addAddress(this.ruleForm, type).then(response => {
              if (response.data) {
                this.$message.success('新增成功')
                this.closePopUp()
                this.$emit('getList')
              }
            })
          } else {
            // 修改地址
            modifyAddress(this.ruleForm, '').then(response => {
              if (response.data) {
                this.$message.success('修改成功!')
                this.closePopUp()
                this.$emit('getList')
              } else {
                this.$message.error(response.message)
              }
            }).catch(() => {
              debugger
              this.$message.error('系统繁忙，请稍后重试！')
            })
          }
        }
      })
    },
    submitMap(val) {
      this.showMap = false
      this.ruleForm.addressTitle = val.receiveProvince + val.receiveCity + val.receiveDistrict + val.receiveAddress
      this.ruleForm.receiveAddress = val.receiveAddress
      this.ruleForm.receiveProvince = val.receiveProvince
      this.ruleForm.receiveCity = val.receiveCity
      this.ruleForm.receiveDistrict = val.receiveDistrict
      this.ruleForm.latitude = val.latitude
      this.ruleForm.longitude = val.longitude
    },
    concel() {
      this.showMap = false
    }
  }
}
</script>

<style scoped lang="scss">
.pop-up {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  .add-container {
    width: 713px;
    .txt {
      color: #3d3d3d;
      font-size: 16px;
      border: 1px solid #e5e5e5;
      height: 42px;
      background-color: #e5e5e5;
      display: flex;
      padding: 0 15px 0 21px;
      justify-content: space-between;
      align-items: center;
      .el-icon-close {
        font-weight: 700;
      }
      .el-icon-close:hover {
        cursor: pointer;
      }
    }
    .add-content {
      background-color: #fff;
      height: 400px;
      width: 100%;
      padding: 20px 0 0 94px;
    }
  }
}
::v-deep .el-input__inner {
  height: 35px;
  font-size: 13px;
}
::v-deep .el-form-item {
  margin-bottom: 20px;
  height: 35px;
}
::v-deep .el-form-item:nth-child(2) {
  height: 89px;
  margin-bottom: 0;
  position: relative;
  .el-form-item__error {
    top: 201%;
  }
  .num {
    font-size: 12px;
    color: #6b6b6b;
    position: absolute;
    bottom: -50px;
    left: 250px;
  }
}
::v-deep .el-form-item__content {
  height: 35px;
}
::v-deep .el-input {
  height: 35px;
  width: 236px;
}
::v-deep .el-form-item__label {
  height: 35px;
}
::v-deep .el-textarea__inner {
  width: 236px;
  height: 70px;
  font-size: 13px;
  //  margin-bottom: 19px;
}
::v-deep .el-textarea {
  width: 236px;
}
::v-deep .el-input__icon {
  color: #ff3b30;
}
</style>
